// 导入css
import AdMinCss from "./index.module.css"
import React, { Component } from 'react'
import { Routes, Route } from 'react-router-dom'
import { Layout, Menu, Dropdown, Button, Space } from 'antd';
import {
    DownOutlined,
} from '@ant-design/icons';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import MinLeft from "./MinLeft"
import RoutesOption from "../../Routes";

const { Header, Sider, Content } = Layout;
const menuRight = (
    <Menu >
        <Menu.Item >
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                退出登录
            </a>
        </Menu.Item>
    </Menu>
);
const menuLeft = (
    <Menu>
        <Menu.Item key='1' >
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                切换小区
            </a>
        </Menu.Item>
        <Menu.Item key='2'>
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                切换租户
            </a>
        </Menu.Item>
    </Menu>
);

export default class AdMin extends Component {
    state = {
        collapsed: false,
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    render() {
        return (
            <div className={AdMinCss.main}>
                <Layout style={{ height: "100vh" }}>
                    <MinLeft collapsed={this.state.collapsed} />
                    <Layout className="site-layout">
                        <Header className={AdMinCss.top} style={{ padding: 0 }}>
                            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                className: 'trigger',
                                onClick: this.toggle,
                            })}
                            <div className={AdMinCss.topRightBox} a="123123">
                                <div style={{ float: "left", fontSize: "12px" }}>
                                    <span>切换小区</span>：
                                    <span>？？？？</span>
                                </div>
                                <div className={AdMinCss.topRightBoxLeft}>
                                    <Dropdown overlay={menuLeft} placement="bottomRight">
                                        <Button className={AdMinCss.topRightBoxLeftBtn}>
                                            <DownOutlined />
                                        </Button>
                                    </Dropdown>
                                </div>
                                <div className={AdMinCss.topRightBoxRigh}>
                                    <img src="" alt="" className={AdMinCss.topRightBoxRighImg} />
                                    <Dropdown overlay={menuRight} placement="bottomRight">
                                        <Button className={AdMinCss.topRightBoxRighBtn} trigger={["click"]}>
                                            <DownOutlined />
                                        </Button>
                                    </Dropdown>
                                </div>
                            </div>
                        </Header>
                        {/* <Breadcrumb style={{ margin: '5px 0', cursor: 'pointer' }}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb> */}
                        {/* <Breadcrumb itemRender={this.itemRender} routes={routes} /> */}
                        <Content
                            className="site-layout-background"
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                minHeight: 280,
                            }}
                        >
                            <RoutesOption/>
                        </Content>
                    </Layout>
                </Layout>
            </div>
        )
    }
}
